<template>
  <div class="app-container">
    <div class="my-define-dialog-title">
      {{title}}
      <div class="my-define-dialog-title-btn">
        <el-button size="mini" type="primary" @click.native="submitForm">提 交</el-button>
        <el-button size="mini" @click.native="cancel(false)">取 消</el-button>
      </div>
    </div>
    <el-scrollbar :style="customeStyle">
      <el-form ref="myForm" :model="form" :label-width="labelForm.labelWidth" :label-position="labelForm.labelPosition">
        <el-row>
          <el-col :span="24">
            <el-form-item label="头像">
              <el-upload class="avatar-uploader" :action="uploadAction" name="saasyyFile" :headers="uploadHeaders"
                :on-success="handleFileSuccess" :show-file-list="false" :data="uploadData">
                <img v-if="avatar.imageUrl" :src="avatar.imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="登录名" :prop="'LoginName'" :rules="{
                  required: true, message: '请输入登录名', trigger: 'change'}">
              <el-input v-model="form.LoginName" placeholder="请输入登录名" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="用户编号" :prop="'UserNumber'" :rules="{
                  required: true, message: '请输入', trigger: 'change'
                }">
              <el-input v-model="form.UserNumber" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="姓名" :prop="'UserName'" :rules="{
                  required: true, message: '请输入', trigger: 'change'
                }">
              <el-input v-model="form.UserName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="电话" :prop="'ContactPhone'" :rules="{
                  required: true, message: '请输入电话', trigger: 'change'
                }">
              <el-input v-model="form.ContactPhone" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="性别">
              <el-radio-group v-model="form.GenderCode">
                <el-radio v-for="item in genderData" :key="item.value" :label="item.value">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态">
              <el-radio-group v-model="form.Status">
                <el-radio :label="1">生效</el-radio>
                <el-radio :label="0">失效</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="后台用户?">
              <el-radio-group v-model="form.IsSysUser">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="APP用户?">
              <el-radio-group v-model="form.IsAPPUser">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <template v-if="tenantId===0">
            <el-col :span="24">
              <el-form-item label="属于租户?">
                <el-radio-group @change="handleChangeIsTenant" v-model="form.IsTenant">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.IsTenant">
              <el-form-item label="所属租户">
                <el-select filterable @change="handleChangeTenant" v-model="form.TenantId" placeholder="请选择">
                  <el-option v-for="item in tenantData" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="24">
            <el-form-item label="所属角色">
              <el-select multiple v-model="roleIdData" placeholder="请选择">
                <el-option v-for="item in roleData" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="所属部门">
              <el-cascader collapse-tags v-model="departmentIdData" :options="departmentData"
                :props="{multiple: true, checkStrictly: false,value:'Id',label:'Name'}" clearable>
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script>
  import {
    getToken
  } from '@/utils/auth'
  import {
    getUser,
    saveUser,
    getRoleByTenant
  } from '@/api/users/users'
  import {
    validatePhone
  } from '@/utils/validate'
  import defaultSettings from '@/settings'
  export default {
    name: 'user-edit',
    props: {
      Id: {
        type: Number,
        default: 0
      },
      title: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        customeStyle: {
          height: (window.innerHeight - 180) + 'px'
        },
        labelForm: defaultSettings.labelForm,
        form: {
          Id: 0,
          UserName: '',
          Gender: 1
        },
        genderData: [],
        roleIdData: [],
        roleData: [],
        tenantData: [],
        tenantId: null,
        departmentIdData: [],
        departmentData: [],
        avatar: {
          fileId: 0,
          imageUrl: ''
        },
        uploadHeaders: {
          profile: getToken()
        },
        uploadData: {
          FolderName: 'User'
        },
        uploadAction: process.env.VUE_APP_BASE_API + '/Common/Upload/UploadFile'
      }
    },
    created() {
      this.getData()
    },
    methods: {
      /** 查询列表 */
      getData() {
        getUser(this.Id).then(res => {
          if (res.status) {
            this.form = res.outputData.model;
            this.genderData = res.outputData.genderData
            this.roleIdData = res.outputData.roleIdData
            this.roleData = res.outputData.roleData
            this.tenantData = res.outputData.tenantData
            this.tenantId = res.outputData.tenantId
            this.departmentIdData = res.outputData.departmentIdData
            this.departmentData = res.outputData.departmentData
            this.avatar = res.outputData.avatar
          }
        })
      },
      validCellPhone(rule, value, callback) {
        return validatePhone(rule, value, callback);
      },
      submitForm() {
        var that = this;
        this.genderData.forEach(function(item) {
          if (item.value == that.form.GenderCode) {
            that.form.Gender = item.label
          }
        })
        this.form['AvatarFileId'] = this.avatar.fileId
        this.form['roleIds'] = JSON.stringify(this.roleIdData)
        this.form['departmentIds'] = JSON.stringify(this.departmentIdData)
        this.$refs['myForm'].validate(valid => {
          if (valid) {
            saveUser(this.form).then(res => {
              if (res.status) {
                this.$message({
                  message: this.form.Id > 0 ? '修改成功' : '新增成功',
                  type: 'success'
                })
                this.cancel(true);
              }
            })
          }
        })
      },
      cancel(reload) {
        this.$$parent(this, "doCloseDetail", reload)
      },
      handleChangeIsTenant(val) {
        if (!val) {
          this.handleChangeTenant(0)
        } else if (this.form.TenantId == 0) {
          this.form.TenantId = null;
          this.roleIdData = [];
          this.roleData = [];
        }
      },
      handleChangeTenant(val) {
        getRoleByTenant(val).then(res => {
          if (res.status) {
            this.roleData = res.outputData
            this.roleIdData = []
          }
        })
      },
      handleFileSuccess(res, file) {
        if (res.status) {
          this.avatar.fileId = res.outputData.fileId
          this.avatar.imageUrl = res.outputData.fileUrl
        }
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
